<script setup>
// vue3.0之后，使用<script setup>这个语法糖，就不用显示的导入并注册组件，比如HelloWorld等，导入即自动注册；也不用显示的导出组件，比如App这个组件，自动导出

// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup

// 导入路由需要的模块
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
// 导入路由
const router = useRouter();
const route = useRoute();

// 使用编程式导航进行路由跳转，相关方法定义
// home点击事件
// const homeClick = () => {
// 	router.push({
// 		path: "/home",
// 		query: { ...route.query },
// 	});
// 	console.log("homeClick");
// 	console.log(route.query);
// };
// // about点击事件
// const aboutClick = () => {
// 	router.push({
// 		path: "/about",
// 		query: { ...route.query },
// 	});
// 	console.log("aboutClick");
// };
const userId = ref("1001");
// 用户按钮点击，路由跳转并传递参数
const userClick = () => {
	router.push({
		path: "/user/" + userId.value,
	});
};
const profileClick = () => {
	router.push({
		path: "/profile",
		query: {
			name: "jordy",
			age: 18,
		},
	});
};
</script>

<template>
	<img alt="Vue logo" src="./assets/logo.png" />
	<HelloWorld msg="Hello Vue 3 + Vite" />
	<!-- 使用replace时，浏览器左上角不能回退 -->
	<!-- <router-link to="/home" replace>首页 </router-link>
	<router-link to="/about" replace>关于</router-link> -->

	<!-- 点击<router-link>标签时，会添加一个类名，就是router-link-exact-active，使用active-class="activate"可以自定义这个类名，也可以在/router/index.js中的router中统一设置，添加 linkActiveClass:类名 属性 -->
	<!-- 1、使用标签进行路由跳转 -->
	<router-link to="/home">首页</router-link>
	<router-link to="/about">关于</router-link>
	<!-- 使用v-bind绑定数据userId，然后再进行拼接 -->
	<!-- <router-link :to="'/user/' + userId">用户</router-link> -->

	<!-- query方式传递参数 -->
	<!-- <router-link :to="{ path: '/profile', query: { name: 'jordy', age: 22 } }">
		档案
	</router-link> -->

	<!-- 2、使用scripted代码进行路由跳转 -->
	<!-- <button @click="homeClick">首页</button>
	<button @click="aboutClick">关于</button> -->

	<!-- 编程式导航传递参数 -->
	<button @click="userClick">用户</button>
	<button @click="profileClick">档案</button>

	<!-- <router-link>中的内容渲染在这里 -->
	<!-- <router-view></router-view> -->
	<!-- 使用keep-alive标签缓存router-view中的内容，不需要每次都重新加载。这里的写法是基本使用的固定写法，不可更改，可以添加新的属性 -->
	<router-view v-slot="{ Component }">
		<transition>
			<keep-alive>
				<component :is="Component" />
			</keep-alive>
		</transition>
	</router-view>
</template>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}

/* 点击<router-link>标签时，会添加一个类名，就是router-link-exact-active */
.router-link-exact-active {
	color: #008c8c;
}
</style>
